<template>
  <div>
    <transition name="food-detail">
      <div class="food" v-show="showFlag">
        <div class="foot-wrapper">
          <div class="food-content">
            <div class="img-wraper">
              <img src />
              <span @click="closeView">X</span>
              <img src alt />
              <img src alt />
            </div>
          </div>
          <div class="content-wrapper">
            <h3 class="name"></h3>
            <p class="saled"></p>
            <img src alt />
            <p class="price">
              <span class="text"></span>
              <span class="unit"></span>
            </p>
            <div class="cartcontrol-wrapper">
              <carControl :food="food"></carControl>
            </div>
            <div class="buy">选规格</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import carControl from "./../  cartControl/carControl.vue";
export default {
  components: {
    carControl
  },
  props: {
    food: {
      type: Object
    }
  },
  data() {
    return {
      showFlag: false
    };
  },
  methods: {
    showView() {
      this.showFlag = true;
    },
    closeView() {
      this.showFlag = false;
    }
  }
};
</script>
<style lang="less" scope>
.food {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 51px;
  background: white;
  width: 100%;
  z-index: 999999;
}
.food-detail-enter-active,
.food-detail-leave-active {
  transition: 1s;
}
.food-detail-enter,
.food-detail-leave-to {
  transform: translateX(100%);
}
</style>